<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>珍惜遇见</title>
      <!-- MDB icon -->
      
    
        <!-- Favicons -->
        <link rel="shortcut icon" href="assets/images/favicon.png">
    
        <!-- Vendor CSS (Icon Font) -->
        
        <link rel="stylesheet" href="assets/css/vendor/fontawesome.min.css">
        <link rel="stylesheet" href="assets/css/vendor/pe-icon-7-stroke.min.css"> 
    
        <!-- Plugins CSS (All Plugins Files) -->
           
        <link rel="stylesheet" href="assets/css/plugins/splitting.min.css">
        <link rel="stylesheet" href="assets/css/plugins/bootstrap.css">
        <link rel="stylesheet" href="assets/css/plugins/animate.min.css">
        <link rel="stylesheet" href="assets/css/plugins/jquery-ui.min.css">
        <link rel="stylesheet" href="assets/css/plugins/nice-select.min.css">
        <link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css">
        <link rel="stylesheet" href="assets/css/plugins/aos.min.css">
        <link rel="stylesheet" href="assets/css/plugins/odometer-theme-default.min.css"> 
        <!-- Main Style CSS -->
        <link rel="stylesheet" href="assets/css/style.css">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="../MYMDB/MDB-Pro-4.12/css/bootstrap.css">
    <!-- Material Design Bootstrap -->
    <link rel="stylesheet" href="../MYMDB/MDB-Pro-4.12/css/mdb.min.css">
    <!-- Your custom styles (optional) -->
    <link rel="stylesheet" href="../MYMDB/MDB-Pro-4.12/css/style.css">

    
    </head>

<body>
    <!-- Header Section Start -->
    <div class="header section">

        <!-- Header Top Start -->
        <div class="header-top bg-secondary">
            <div class="container">
                <div class="row align-items-center">
                    <!-- Header Top Link/Search Start -->
                    <div class="col-lg-8 col-md-12">
                        <ul class="header-top-links">
                            <li><i class="fa fa-envelope-o"></i><a href="#"> info@example.com</a></li>
                            <li><i class="fa fa-clock-o"></i> <span>Monday - Sunday 9.00 - 18.00</span> </li>
                        </ul>
                    </div>
                    <!-- Header Top Link/Search End -->
                    <!-- Header Top Action Bar Start -->
                    <div class="col-lg-4 col-md-12 text-md-right expert-text">
                        <p> Talk with Expert : <span> 1800 445 556 </span> </p>
                    </div>
                    <!-- Header Top Action Bar End -->
                </div>
            </div>
        </div>
        <!-- Header Top End -->

        <!-- Header Bottom Start -->
        <div class="header-bottom section header-sticky">
            <div class="container">
                <div class="row align-items-center">
                    <!-- Header Logo Start -->
                    <div class="col-lg-3 col-6">
                        <div class="header-logo">
                            <a href="index.html"><img src="assets/images/logo/logo.png" alt="Site Logo" /></a>
                        </div>
                    </div>
                    <!-- Header Logo End -->

                    <!-- Header Menu Start -->
                    <div class="col-lg-9 col-6">
                        <!-- Main Menu Start -->
                        <div class="main-menu d-none d-lg-flex">
                           <ul>
                                <li>
                                    <a href="index.html">Home</a>
                                </li>
                                <li>
                                    <a href="project-grid.html">Project</a>
                                </li>
                                <li class="has-children">
                                    <a href="#">Pages</a>
                                    <ul class="sub-menu">
                                        <li><a href="about.html">About Us</a></li>
                                        <li><a href="service.html">Service</a></li>
                                        <li><a href="contact.html">Contact</a></li>
                                        <li><a href="project-details.html">Project Details</a></li>
                                        <li><a href="faq.html">Faq</a></li>
                                        <li><a href="error-404.html">Error 404</a></li>
                                    </ul>
                                </li>
                               
                                
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="contact.html">Contact</a></li>
                            </ul>
                        </div>
                        <!-- Main Menu End -->

                        <!-- Main Menu Riht Side Start -->
                        <div class="main-menu-right-side d-flex d-lg-none">

                            <!-- Header Search Start -->
                            <div class="header-search mr-4">
                                <a class="header-search-icon" href="#"><i class="fa fa-search"></i></a>
                            </div>
                            <!-- Header Search End -->

                            <!-- Mobile Menu Bar Start -->
                            <div class="mobile-menu-bar-wrapper">
                                <a href="#" class="mobile-menu-bar"><i class="fa fa-bars"></i></a>
                            </div>
                            <!-- Mobile Menu Bar End -->

                        </div>
                        <!-- Main Menu Riht Side End -->

                    </div>
                    <!-- Header Menu End -->
                </div>
            </div>
        </div>
        <!-- Header Bottom End -->

        <!-- Mobile Menu Start -->
        <div class="mobile-menu-wrapper">
            <div class="body-overlay"></div>
            <!-- Mobile Menu Inner Start -->
            <div class="mobile-menu-inner">

                <!-- Button Close Start -->
                <div class="btn-close-bar">
                    <i class="pe-7s-close"></i>
                </div>
                <!-- Button Close End -->

                <!-- mobile menu start -->
                <div class="mobile-navigation">
                    <nav>
                        <ul class="mobile-menu">
                            <li class="has-children">
                                <a href="#">Home <i class="fa fa-angle-down"></i></a>
                                <ul class="dropdown">
                                    <li><a href="index.html">Home One</a></li>
                                    <li><a href="index-2.html">Home Two</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Project <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="project-grid.html">Project Style 1</a></li>
                                    <li><a href="project-grid-2.html">Project Style 2</a></li>
                                    <li><a href="project-details.html">Project Details</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="about.html">About Us</a></li>
                                    <li><a href="service.html">Service</a></li>
                                    <li><a href="contact.html">Contact</a></li>
                                    <li><a href="faq.html">Faq</a></li>
                                    <li><a href="error-404.html">Error 404</a></li>
                                </ul>
                            </li>
                            <li class="has-children">
                                <a href="#">Blog <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                                <ul class="dropdown">
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
                                    <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                    <li><a href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                                </ul>
                            </li>
                            <li><a href="about.html">About</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </nav>
                </div>
                <!-- mobile menu end -->

                <!-- Contact Links/Social Links Start -->
                <div class="mt-auto">
                    <!-- Contact Link Start -->
                    <ul class="contact-links">
                        <li><i class="fa fa-phone"></i><a href="#"> +012 3456 789 123</a></li>
                        <li><i class="fa fa-envelope-o"></i><a href="#"> info@example.com</a></li>
                        <li><i class="fa fa-clock-o"></i> <span>Monday - Sunday 9.00 - 18.00</span> </li>
                    </ul>
                    <!-- Contact Link End -->

                    <!-- Social Widget Start -->
                    <div class="widget-social">
                        <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                        <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                        <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                        <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                        <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                    </div>
                    <!-- Social Widget End -->
                </div>
                <!-- Contact Links/Social Links End -->

            </div>
            <!-- Mobile Menu Inner End -->
        </div>
        <!-- Mobile Menu End -->

        <!-- Offcanvas Search Start -->
        <div class="offcanvas-search">
            <!-- Offcanvas Search Inner Start -->
            <div class="offcanvas-search-inner">
                <!-- Button Close Start -->
                <div class="btn-close-bar">
                    <i class="pe-7s-close"></i>
                </div>
                <!-- Button Close End -->

                <!-- Offcanvas Search Form Start -->
                <form class="offcanvas-search-form" action="#">
                    <input type="text" placeholder="Search Products...">
                </form>
                <!-- Offcanvas Search Form End -->

            </div>
            <!-- Offcanvas Search Inner End -->

        </div>
        <!-- Offcanvas Search End -->

    </div>
    <!-- Header Section End -->

    <!-- Breadcrumb Section Start -->
    <div class="section breadcrumb-bg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="cr-breadcrumb-area">
                        <h1 class="title">Porject Details</h1>
                        <ul class="breadcrumb-list">
                            <li><a href="index.html">Home</a></li>
                            <li><span>Project Details</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Section End -->

    <!-- Project Section Start -->
    <div class="section section-padding">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="project-image mb-10">
                        <img src="assets/images/project/project-image-lg.jpg" alt="Project Large Image">
                    </div>
                </div>
            </div>

            <div class="row mb-n9">
                <div class="col-md-5 col-lg-3 mb-8 col-sm-12">
                    <div class="project-info">
                        <h4 class="title mb-6">Project Information</h4>
                        <ul class="mb-n1">
                            <li><span>Client:</span> Construction Company.</li>
                            <li><span>Location:</span>Lake View, London.</li>
                            <li><span>Area:</span> 90,920 m2</li>
                            <li><span>Date:</span>June - 2021</li>
                            <li><span>Value:</span>99558878</li>
                            <li><span>Architect:</span>Milie & Smith</li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-7 col-lg-9 col-sm-12 mb-8">
                    <div class="project-desc">
                        <h4 class="title mb-6">Project Description</h4>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet possimus rem ipsum iste facilis, consequuntur culpa cupiditate illum sunt dolores nostrum autem ab excepturi quod praesentium quia, voluptas ratione quas. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente commodi, dolorum beatae, harum laudantium modi rem ipsum dolor dolorem eveniet sed accusamus totam earum nesciunt exercitationem quae, at recusandae nisi. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, tenetur, facilis in, hic odio facere reprehenderit.</p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eveniet possimus rem ipsum iste facilis, consequuntur culpa cupiditate illum sunt dolores nostrum autem ab excepturi quod praesentium quia, voluptas ratione quas. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente commodi, dolorum beatae, harum laudantium modi rem ipsum dolor dolorem eveniet sed accusamus totam earum nesciunt exercitationem quae, at recusandae nisi. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vitae, tenetur, facilis in, hic odio facere reprehenderit.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Project Masonry Section End -->

    <footer class="section footer-section bg-secondary">
       <!-- Footer Top Start -->
       <div class="footer-top">
        <div class="container">
            <div class="row mb-n10">
                <div class="col-12 col-sm-6 col-lg-3 col-xl-3 mb-10">
                    <div class="single-footer-widget">
                        <div class="footer-logo">
                            <a href="index.html">
                                <img src="assets/images/logo/footer-logo.png" alt="Logo Image">
                            </a>
                        </div>
                        <p class="desc-content pt-5 pb-3">Lorem ipsum dolor sit amet, consect ascing elit, sed do
                            eiusmod incididunt ut labore et dolore Many desktop</p>
                        <a class="read_more" href="#">了解更多</a>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-3 col-xl-3 mb-10">
                    <div class="single-footer-widget">
                        <h2 class="widget-title">H科技工作室项目</h2>
                        <ul class="widget-list pt-6">
                            <li><a href="service.html">Mobile App Development</a></li>
                            <li><a href="service.html">Ui/Ux Design</a></li>
                            <li><a href="service.html">Web Development</a></li>
                            <li><a href="service.html">Article Writting</a></li>
                            <li><a href="service.html">Content Management</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-2 col-xl-3 mb-10">
                    <div class="single-footer-widget aos-init aos-animate">
                        <h2 class="widget-title">快捷链接</h2>
                        <ul class="widget-list pt-6">
                            <li><a href="index.html">我的空间</a></li>
                            <li><a href="contact.html">联系我们</a></li>
                            <!-- <li><a href="about.html">About</a></li>
                            <li><a href="contact.html">Help Center</a></li>
                            <li><a href="contact.html">Conditin</a></li>
                            <li><a href="contact.html">Term Of Use</a></li> -->
                        </ul>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-10">
                    <div class="single-footer-widget">
                        <h2 class="widget-title">联系</h2>
                        <div class="widget-body pt-5">
                            <p class="desc-content mb-0">Enter your email and receive the latest news from us.</p>

                            <!-- Newsletter Form Start -->
                            <div class="newsletter-form-wrap pt-4">
                                <form id="mc-form" class="mc-form">
                                    <input type="email" id="mc-email" class="form-control email-box"
                                        placeholder="email@example.com" name="EMAIL">
                                    <button id="mc-submit" class="newsletter-btn" type="submit"><i
                                            class="fa fa-envelope"></i></button>
                                </form>
                                <!-- mailchimp-alerts Start -->
                                <div class="mailchimp-alerts text-centre">
                                    <div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
                                    <div class="mailchimp-success text-success"></div><!-- mailchimp-success end -->
                                    <div class="mailchimp-error text-danger"></div><!-- mailchimp-error end -->
                                </div>
                                <!-- mailchimp-alerts end -->
                            </div>
                            <!-- Newsletter Form End -->

                            <!-- Soclial Link Start -->
                            <div class="widget-social justify-content-start mt-6">
                                <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                                <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                                <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                                <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                                <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                            </div>
                            <!-- Social Link End -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Footer Top End -->

        <!-- Footer Bottom Start -->
        <div class="container">
            <div class="row align-items-center footer-bottom">
                <div class="col-12 text-center">
                    <div class="copyright-content">
                        <p class="mb-0">Copyright © 2020 <a href="https://zozotheme.com/">ZOZO Themes.</a> All Rights Reserved.</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Bottom End -->
    </footer>

    <!-- Scroll Top Start -->
    <a href="#" class="scroll-top" id="scroll-top">
        <i class="arrow-top fa fa-arrow-up"></i>
        <i class="arrow-bottom fa fa-arrow-up"></i>
    </a>
    <!-- Scroll Top End -->

    <!-- Vendors JS -->

        
    <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
    <script src="assets/js/vendor/jquery-3.5.1.min.js"></script>
    <script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
    <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script> 
   

    <!-- Plugins JS -->

        
    <script src="assets/js/plugins/splitting.min.js"></script>
    <script src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script src="assets/js/plugins/aos.min.js"></script>
    <script src="assets/js/plugins/nice-select.min.js"></script>
    <script src="assets/js/plugins/jquery.ajaxchimp.min.js"></script>
    <script src="assets/js/plugins/jquery-ui.min.js"></script>
    <script src="assets/js/plugins/masonry.min.js"></script>
    <script src="assets/js/plugins/odometer.min.js"></script> 
   
    <!--Main JS-->
    <script src="assets/js/main.js"></script>
</body>

</html>